<template>
  <!-- 纠正预防措施验证表单弹窗 -->
  <el-dialog
    :close-on-click-modal="false"
    v-model="visibleDialog"
    :title="props.title"
    width="1500"
    draggable
    @close="closeDialog"
  >
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="0">
      <!--质量问题-->
      <el-row>
        <el-col :span="5">
          <el-form-item label="责任部门" label-width="80">
            <el-input
              v-if="!props.isReadonly"
              v-model="formData.n0.departmentName"
              clearable
              disabled
            />
            <span v-else> {{ formData.n0.departmentName }} </span>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="责任人" label-width="70">
            <el-input
              v-if="!props.isReadonly"
              v-model="formData.n0.departmentManagerName"
              clearable
              disabled
            />
            <span v-else> {{ formData.n0.departmentManagerName }} </span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="编号" label-width="60">
            <el-input
              v-if="!props.isReadonly"
              v-model="formData.n0.qualityProblemCode"
              clearable
              disabled
            />
            <span v-else> {{ formData.n0.qualityProblemCode }} </span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="限" label-width="50">
            <el-date-picker
              v-if="!props.isReadonly"
              v-model="formData.n0.targetTime"
              type="date"
              style="width: 130px"
              disabled
            />
            <span v-else> {{ formData.n0.targetTime.split(" ")[0] }} </span>
            <span> &nbsp;&nbsp;前上报纠正/预防措施 </span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="限" label-width="20">
            <el-date-picker
              v-if="!props.isReadonly"
              v-model="formData.n0.targetTime"
              type="date"
              style="width: 130px"
              disabled
            />
            <span v-else> {{ formData.n0.targetTime.split(" ")[0] }} </span>
            <span> &nbsp;&nbsp;前上报纠前整改完毕 </span>
          </el-form-item>
        </el-col>
      </el-row>
      <!--质量问题整改要求-->
      <el-row>
        <el-col :span="3" style="margin-top: 6px">
          <span style="font-weight: 700">存在(或潜在)问题及整改要求:</span>
        </el-col>
        <el-col :span="5">
          <el-form-item label="提出部门" label-width="80">
            <el-input
              v-if="!props.isReadonly"
              v-model="formData.n0.proposeDepartmentName"
              clearable
              disabled
            />
            <span v-else> {{ formData.n0.proposeDepartmentName }} </span>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="提出人" label-width="80">
            <el-input
              v-if="!props.isReadonly"
              v-model="formData.n0.createdUserName"
              clearable
              disabled
            />
            <span v-else> {{ formData.n0.createdUserName }} </span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="提出时间" label-width="80">
            <el-input
              v-if="!props.isReadonly"
              v-model="formData.n0.createTime"
              clearable
              disabled
            />
            <span v-else> {{ formData.n0.createTime }} </span>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label="部门经理" label-width="80">
            <el-input
              v-if="!props.isReadonly"
              v-model="formData.n0.proposeManagerName"
              clearable
              disabled
            />
            <span v-else> {{ formData.n0.proposeManagerName }} </span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="经理审核时间" label-width="100">
            <el-input
              v-if="!props.isReadonly"
              v-model="formData.n0.approvalTime"
              clearable
              disabled
            />
            <span v-else> {{ formData.n0.approvalTime }} </span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <el-input
              v-if="!props.isReadonly"
              v-model="formData.n0.approvalOpinion"
              type="textarea"
              :rows="5"
              placeholder="请输入"
              clearable
              disabled
            />
            <div v-else>{{ formData.n0.approvalOpinion }}</div>
          </el-form-item>
        </el-col>
      </el-row>
      <!--N1-->
      <el-row>
        <el-col :span="24">
          <span style="font-weight: 700">纠正预防措施原因分析：</span>
          <el-form-item>
            <el-input
              v-if="!props.isReadonly"
              v-model="formData.exceptionContentN1"
              type="textarea"
              :rows="5"
              placeholder="请输入"
              clearable
              disabled
            />
            <div v-else>{{ formData.exceptionContentN1 }}</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item
          style="margin-top: 10px"
          v-if="!props.isReadonly && formData.assetPhotosN1.length > 0"
        >
          <CommonUploadFile
            :isRead="!props.isReadonly"
            :files="formData.assetPhotosN1"
            @update-files="updateFormFilesN1"
          />
        </el-form-item>
      </el-row>
      <div style="margin-top: 0px">
        <CommonUploadFile
          v-show="props.isReadonly"
          :isRead="props.isReadonly"
          :files="formData.assetPhotosN1"
          @update-files="updateFormFilesN1"
        />
      </div>
      <!--N2-->
      <el-row>
        <el-col :span="24">
          <span style="font-weight: 700">纠正预防措施实施以及完成时间：</span>
          <el-form-item prop="planDate" style="display: inline-block">
            <el-date-picker
              v-if="!props.isReadonly"
              v-model="formData.n2.planDate"
              type="date"
              style="width: 130px"
              placeholder="完成时间"
              disabled
            />

            <span v-else>{{ formData.n2.planDate?.split(" ")[0] }}</span>
          </el-form-item>
          <el-form-item>
            <el-input
              v-if="!props.isReadonly"
              v-model="formData.n2.exceptionContent"
              type="textarea"
              :rows="5"
              placeholder="请输入"
              clearable
              disabled
            />
            <div v-else>{{ formData.n2.exceptionContent }}</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item
          style="margin-top: 10px"
          v-if="!props.isReadonly && formData.assetPhotosN2.length > 0"
        >
          <CommonUploadFile
            :isRead="!props.isReadonly"
            :files="formData.assetPhotosN2"
            @update-files="updateFormFilesN2"
          />
        </el-form-item>
      </el-row>
      <div style="margin-top: 0px">
        <CommonUploadFile
          v-show="props.isReadonly"
          :isRead="props.isReadonly"
          :files="formData.assetPhotosN2"
          @update-files="updateFormFilesN2"
        />
      </div>
      <!--N3-->
      <el-row>
        <el-col :span="24">
          <span style="font-weight: 700">纠正预防措施验证：</span>
          <el-form-item>
            <el-input
              v-if="!props.isReadonly"
              v-model="formData.exceptionContentN3"
              type="textarea"
              :rows="5"
              placeholder="请输入"
              clearable
              disabled
            />
            <div v-else>{{ formData.exceptionContentN3 }}</div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item
          style="margin-top: 10px"
          v-if="!props.isReadonly && formData.assetPhotosN3.length > 0"
        >
          <CommonUploadFile
            :isRead="!props.isReadonly"
            :files="formData.assetPhotosN3"
            @update-files="updateFormFilesN3"
          />
        </el-form-item>
      </el-row>
      <div style="margin-top: 0px">
        <CommonUploadFile
          v-show="props.isReadonly"
          :isRead="props.isReadonly"
          :files="formData.assetPhotosN3"
          @update-files="updateFormFilesN3"
        />
      </div>
      <!--N4-->
      <el-row>
        <el-col :span="24">
          <span style="font-weight: 700"
            >验证:(此栏由人力资源部部(企管办)/质量保证部/安全监管部填写)</span
          >
          <el-form-item prop="exceptionContent">
            <el-input
              v-if="!props.isReadonly"
              v-model="formData.exceptionContent"
              type="textarea"
              :rows="5"
              placeholder="请输入"
              clearable
              disabled
            />
            <div v-else>{{ formData.exceptionContent }}</div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button>导出报工</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useDictStoreHook } from "@/store/modules/dictionary"; // 引入
const dictionaryStore = useDictStoreHook();

defineOptions({
  name: "QMSN5ADDORUPDATE",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isReadonly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
});

const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
    setTimeout(() => {
      formRef.value.clearValidate();
    }, 50);
  }
);

const rules = reactive({
  exceptionContent: [
    { required: true, message: "请输入验证", trigger: "blur" },
    { min: 1, max: 1000, message: "长度在 1 到 1000 个字符", trigger: "blur" },
  ],
});

const formRef = ref(ElForm);

let formData = reactive({
  id: "",
  qualityExceptionId: "",
  qualityExceptionCode: "",
  exceptionContent: "",
  version: "",
  remarks: "",
  createTime: "",
  createdUserId: "",
  createdUserName: "",
  lastUpdateTime: "",
  lastUpdatedUserId: "",
  lastUpdatedUserName: "",
  enabled: "",
  deleted: "",
  workOrderId: "",
  n0: {
    id: "",
    departmentName: "",
    departmentManagerName: "",
    qualityProblemCode: "",
    targetTime: "",
    proposeDepartmentName: "",
    createTime: "",
    createdUserName: "",
    proposeManagerName: "",
    approvalTime: "",
    approvalOpinion: "",
  },
  n2: {
    exceptionContent: "",
    planDate: "",
  },
  assetPhotosN1: [],
  assetPhotosN2: [],
  assetPhotosN3: [],
  planDate: "",
  exceptionContentN1: "",
  exceptionContentN2: "",
  exceptionContentN3: "",
  isSubmit: 0,
});

watch(
  () => props.data,
  (newVal: any) => {
    formData.id = "";
    if (newVal?.id) {
      const {
        id,
        qualityExceptionId,
        qualityExceptionCode,
        exceptionContent,
        version,
        remarks,
        createTime,
        createdUserId,
        createdUserName,
        lastUpdateTime,
        lastUpdatedUserId,
        lastUpdatedUserName,
        enabled,
        deleted,
      } = newVal;
      Object.assign(formData, {
        id,
        qualityExceptionId,
        qualityExceptionCode,
        exceptionContent,
        version,
        remarks,
        createTime,
        createdUserId,
        createdUserName,
        lastUpdateTime,
        lastUpdatedUserId,
        lastUpdatedUserName,
        enabled,
        deleted,
      });
      formData.qualityExceptionId = newVal.qualityProblemId;
      formData.qualityExceptionCode = newVal.qualityProblemCode;
      formData.workOrderId = newVal.id;
      getN4(newVal.id, newVal.qualityProblemId);
      loading1.value = true;
    }
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
  resetForm();
}

/** 重置表单 */
function resetForm() {
  formRef.value.resetFields();
  formRef.value.clearValidate();
  formData.id = "";
  formData.qualityExceptionId = "";
  formData.qualityExceptionCode = "";
  formData.exceptionContent = "";
  formData.version = "";
  formData.remarks = "";
  formData.createTime = "";
  formData.createdUserId = "";
  formData.createdUserName = "";
  formData.lastUpdateTime = "";
  formData.lastUpdatedUserId = "";
  formData.lastUpdatedUserName = "";
  formData.enabled = "";
  formData.deleted = "";
  formData.n0 = n0;
  formData.n2 = n2;
  formData.assetPhotosN1 = [];
  formData.assetPhotosN2 = [];
  formData.assetPhotosN3 = [];
  formData.planDate = "";
  formData.exceptionContentN1 = "";
  formData.exceptionContentN2 = "";
  formData.exceptionContentN3 = "";
  formData.workOrderId = "";
  formData.isSubmit = 0;
}
const n0: any = reactive({
  id: "",
  departmentName: "",
  departmentManagerName: "",
  qualityProblemCode: "",
  targetTime: "",
  proposeDepartmentName: "",
  createTime: "",
  createdUserName: "",
  proposeManagerName: "",
  approvalTime: "",
});
const n2: any = reactive({
  exceptionContent: "",
  planDate: "",
});

const loading = ref(false);
const loading1 = ref(false);

/** 纠正预防措施验证保存提交 */
function handleSubmit(state: Number) {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      loading.value = true;
      const text = state == 0 ? "保存" : "提交";
      formData.isSubmit = state;
      await request({
        url: "/qms/q8dn4/save",
        method: "post",
        data: formData,
      }).finally(() => {
        loading.value = false;
      });
      ElMessage.success(text + `成功`);
      closeDialog();
      emit("reset-table", formData.id);
    }
  });
}

// 组件销毁时调用
onBeforeUnmount(() => {
  visibleDialog.value = false;
  emit("change-visible", false);
});
// 图片处理
function updateFormFilesN1(val: []) {
  formData.assetPhotosN1 = val;
}
// 图片处理
function updateFormFilesN2(val: []) {
  formData.assetPhotosN2 = val;
}
// 图片处理
function updateFormFilesN3(val: []) {
  formData.assetPhotosN3 = val;
}
//获取业务信息N4
const getN4 = async (id: string, exceptionId: string) => {
  if (!id || !exceptionId) {
    return;
  }
  const res = await request({
    url: "/qms/q8dn4/getN4",
    method: "post",
    data: {
      id: id,
      qualityExceptionId: exceptionId,
    },
  });
  if (res.data != null) {
    Object.assign(formData, res.data);
    formData.assetPhotosN1 = res.data.N1.assetPhotosN1;
    formData.assetPhotosN2 = res.data.N2.assetPhotosN2;
    formData.assetPhotosN3 = res.data.N3.assetPhotosN3;
    formData.exceptionContentN1 = res.data.N1.exceptionContent;
    formData.exceptionContentN3 = res.data.N3.exceptionContent;
  } else {
    formData.id = "";
  }
};
</script>
